html,
body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

body {
  background-color: #303541;
  main {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    .cube {
      width: 400px;
      height: 400px;
      transform-style: preserve-3d;
      transform-origin: 200px 200px 0;
      animation: rotate-cube 10s ease-in-out infinite;
      img {
        width: 400px;
        height: 400px;
        background-size: cover;
        background-position: center center;
        opacity: 0.8;
        position: absolute;
        box-shadow: inset 0 0 4px 2px rgba(106, 106, 106, 0.4);
      }
      img[alt="front$"]{ transform: rotateY( 00deg) translateZ(200px); }
      img[alt="right$"]{ transform: rotateY( 90deg) translateZ(200px); }
      img[alt="left$$"]{ transform: rotateY(-90deg) translateZ(200px); }
      img[alt="bottom"]{ transform: rotateX( 90deg) translateZ(200px); }
      img[alt="up$$$$"]{ transform: rotateX(-90deg) translateZ(200px); }
      img[alt="back$$"]{ transform: rotateY(180deg) translateZ(200px); }
    }
  }
}




@keyframes rotate-cube {
  0%    { transform: rotateX(  0deg)  rotateY(0deg) }
  20%   { transform: rotateY(-90deg)   }/* 右 */
  40%   { transform: rotateX(-90deg)   }/* 上 */
  60%   { transform: rotateY( 90deg)   }/* 左 */
  80%   { transform: rotateX( 90deg)   }/* 下 */
  100%  { transform: rotateX(  0deg)  rotateY(0deg) }
}
